<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Swipeout Actions(滑动操作)</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>
<style>
.ColorPalette{height:35px;
line-height:35px;
text-align:center;}
.GridShow .Row{margin-bottom:10px;}
.GridShow [class^=Col]{line-height:20px;padding:5px;margin-bottom:5px}
</style>
</head>
<body >
<div>
   <div class="HelpBox" id="WrapperArea">
   
	<h2>$$.initSwipeout()</h2>
		<h3>概述</h3>
		<div class="desc">
		<p>滑动操作列表是列表的扩展，它提供滑动操作的功能，滑动列表元素可以展现隐藏的功能菜单，就像滑动删除一样。</p>
	</div>
	<div class="example">
        <h4>滑动操作的布局结构</h4>
		<pre><code>&lt;div class="ListBlock">
  &lt;ul>
    &lt;!-- li上额外的“Swipeout”类 -->
    &lt;li class="ListItem Swipeout">
      &lt;!-- 被“SwipeoutCon”包裹起来的普通列表元素 -->
      &lt;div class="SwipeoutCon">
        &lt;!-- 你的列表元素放在这里 -->
        &lt;div class="ItemCon">
          &lt;div class="ItemMedia">...&lt;/div>
          &lt;div class="ItemInner">...&lt;/div>
        &lt;/div>
      &lt;/div>
      &lt;!-- 左滑动操作 -->
      &lt;div class="SwipeoutActionsLeft">
        &lt;!-- 滑动操作 links/buttons -->
        &lt;a href="#">Action 1&lt;/a>
        &lt;a href="#">Action 2&lt;/a>
      &lt;/div>
      &lt;!-- 右滑动操作 -->
      &lt;div class="SwipeoutActionsRight">
        &lt;!-- 滑动操作 links/buttons -->
        &lt;a href="#">Action 1&lt;/a>
        &lt;a class="SwipeoutClose" href="#">Action 2&lt;/a>
      &lt;/div>
    &lt;/li>
    ...
  &lt;/ul>
&lt;/div></code></pre>
		<ul class="List">
			<li>SwipeoutCon - 列表元素的容器，它会随着滑动操作移动。</li>
			<li>SwipeoutActionsLeft - 左滑动操作的按钮和链接的容器。</li>
			<li>SwipeoutActionsRight - 右滑动操作的按钮和链接的容器。</li>
			<li>SwipeoutClose - 一个可选的链接，点击之后会关闭。</li>
		</ul>
		<p class="CO">注意，SwipeoutCon和SwipeoutActionsLeft/SwipeoutActionsRight应该是&lt;li>的直接子元素</p>
	
	<h4>滑动删除</h4>
	<p>使用滑动删除不需要写Javascript代码，只需要将&lt;a class="SwipeoutDelete">链接加入到滑动菜单中的按钮上：</p>
	<pre><code>&lt;li class="ListItem Swipeout">
  &lt;div class="SwipeoutCon ItemCon">
    &lt;div class="ItemMedia">...&lt;/div>
    &lt;div class="ItemInner">...&lt;/div>
  &lt;/div>
  &lt;div class="SwipeoutActionsRight">
    &lt;!-- 添加删除按钮，项目自动删除 -->
    &lt;a href="#" class="SwipeoutDelete">Delete&lt;/a>
  &lt;/div>
&lt;/li></code></pre>
	<p>可以在点击删除按钮的时候调用确认询问模态窗口（Confirm modal），只有在确认后才会将需要删除的元素从列表中移除。使用确认功能只需要把“data-confirm”和“data-confirm-title”(可选)属性加到删除菜单链接（&lt;a class="SwipeoutDelete">）上</p>
	<pre><code>&lt;li class="ListItem Swipeout">
  &lt;div class="SwipeoutCon ItemCon">
    &lt;div class="ItemMedia">...&lt;/div>
    &lt;div class="ItemInner">...&lt;/div>
  &lt;/div>
  &lt;div class="SwipeoutActionsRight">
    &lt;!-- 添加删除按钮，项目自动删除 -->
    &lt;a href="#" class="SwipeoutDelete"  data-confirm="你确定要删除吗？">Delete&lt;/a>
  &lt;/div>
&lt;/li></code></pre>
	<p>当滑动距离过长的时候，可以通过 SwipeoutOverswipe 类来制定一个操作按钮</p>
	<pre><code>&lt;li class="ListItem Swipeout">
  &lt;div class="SwipeoutCon ItemCon">
    &lt;div class="ItemMedia">...&lt;/div>
    &lt;div class="ItemInner">...&lt;/div>
  &lt;/div>
  &lt;div class="SwipeoutActionsRight">
    &lt;!-- 添加删除按钮，项目自动删除 -->
    &lt;a href="#" class="SwipeoutDelete SwipeoutOverswipe"  data-confirm="你确定要删除吗？">Delete&lt;/a>
  &lt;/div>
&lt;/li></code></pre>
	<p class="CO">SwipeoutOverswipe 只能用在右滑的最后一个按钮或者左滑的第一个按钮。<br/>滑动距离过长的时候会自动在SwipeoutOverswipe按钮上触发click事件，所以你需要在该按钮上绑定正确的事件监听。</p>

	<h4>滑动操作API</h4>
	<p>滑动操作有丰富的JS API可以用来控制里面的元素</p>
	<p>$$.swipeoutOpen(el) - 在指定的元素中显示滑动菜单</p>
	<ul class="List">
		<li>el - 带有“Swipeout”类的列表元素（&lt;li>）的DOM节点或CSS选择器。必选的</li>
		<li>direction - 滑动方向，字符串 (可以是 "left" 或者 "right"). 如果一个条目同时有左滑和右滑操作，那么你必须指定这个参数. 可选</li>
		<li>callback - function - 回调函数，打开动画完成之后执行。</li>
	</ul>
	<p>$$.swipeoutClose(el) - 在指定的元素中隐藏滑动菜单</p>
	<ul class="List">
		<li>el - 带有“Swipeout”类的列表元素（&lt;li>）的DOM节点或CSS选择器。必选的</li>
		<li>callback - function - 回调函数，关闭动画完成之后执行。</li>
	</ul>
	<p>$$.swipeoutDelete(el) - 删除指定的滑动列表中的元素</p>
	<ul class="List">
		<li>el - 带有“Swipeout”类的列表元素（&lt;li>）的DOM节点或CSS选择器。必选的</li>
		<li>callback - function - 回调函数，完成动画后删除DOM前执行。</li>
	</ul>

	<h4>滑动操作事件</h4>
	<table class="Table TableBor TableHover">

			<thead>
				<tr>
					<th>事件名称</th>
					<th>Target</th>
					<th>描述</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>swipeout</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素被移动时触发</td>
				</tr>
				<tr>
					<td>open</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素开始显示时触发</td>
				</tr>
				<tr>
					<td>opened</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素完成显示时触发</td>
				</tr>
				<tr>
					<td>close</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素开始隐藏时触发</td>
				</tr>
				<tr>
					<td>closed</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素完成隐藏时触发</td>
				</tr>
				<tr>
					<td>delete</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素开始删除操作时触发</td>
				</tr>
				<tr>
					<td>deleted</td>
					<td>滑动列表元素
&lt;li class="Swipeout"></td>
					<td>当滑动列表元素被删除后触发</td>
				</tr>
			</tbody>
		</table>



		

	
	
	
	
   </div>

</div>

</div>
</body>
</html>
